<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./echarts.min.js"></script>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="box">
      <!-- 左 -->
      <div class="left">
        <div class="left-one">
          <p>// 当前比对数据 //</p>
          <h1>3.456.789</h1>
        </div>
        <div class="left-two">
          <div class="twotop">
            <span>违法犯罪人员分析</span>
          </div>
          <div id="yuan-one"></div>
        </div>
        <div class="left-san">
          <div class="twotop">
            <span>人口出入记录</span>
          </div>
          <div class="left_table">
            <table border="1px">
              <thead>
                <tr>
                  <th>姓名</th>
                  <th>角色</th>
                  <th>开门方式</th>
                  <th>时间</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>张梦</td>
                  <td>访客</td>
                  <td>人脸</td>
                  <td>2018-11-01 13:51:23</td>
                </tr>
                <tr>
                  <td>李阳荣</td>
                  <td>业主</td>
                  <td>APP</td>
                  <td>2018-11-01 13:51:23</td>
                </tr>
                <tr>
                  <td>张无双</td>
                  <td>访客</td>
                  <td>人脸</td>
                  <td>2018-11-01 13:51:23</td>
                </tr>
                <tr>
                  <td>李阳</td>
                  <td>业主</td>
                  <td>APP</td>
                  <td>2018-11-01 13:51:23</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <!-- 中 -->
      <div class="content">
        <div class="content_top">
          <img src="./效果素材/jinghui.png" />
          <span>智慧社区内网比对平台</span>
        </div>
        <div class="content_box">
          <div class="content_weather">
            <div class="content_weather_left">
              <p class="content_weather_left_trim">16:19:50</p>
              <p class="content_weather_left_date">2020/1/21 pm 周2</p>
            </div>

            <div class="content_weather_rig">
              <img src="./效果素材/weather/小雨.png" />
              <div class="content_weather_rig_con">
                <p>多云</p>
                <p class="ppp">16~22℃</p>
                <p>天津市和平区</p>
              </div>
            </div>
          </div>
          <div class="content_line_bg"></div>
          <div class="content_one" style="margin-top: 45px">
            <p style="color: #e9f532">NO.1北京 : 2543289人</p>
            <p style="color: #6bef2e">NO.1天津 : 5690人</p>
            <p style="color: #7ff5b4">NO.1河北 : 456人</p>
          </div>
        </div>
        <div class="ditu">
          <img src="./效果素材/地图.png" alt="">
        </div>
      </div>
      <!-- 右边 -->
      <div class="right">
        <div class="right-one">
          <div class="twotop">
            <span>违法犯罪人员年龄分布</span>
          </div>
          <div id="yuan-two"></div>
        </div>
        <div class="right-two">
          <div class="twotop">
            <span>违法犯罪人员地区分布</span>
          </div>
          <div id="zhu"></div>
        </div>
        <div class="right-san">
          <div class="twotop">
            <span>违法犯罪人员地区分布</span>
          </div>
          <div id="zhe"></div>
        </div>
      </div>
    </div>
  </body>
  <script>
    var myChart = echarts.init(document.querySelector("#yuan-one"));
    var option = {
      title: {
        left: "center",
      },
      legend: {
        orient: "vertical",
        left: "left",
        textStyle: {
          color: "#fff",
        },
      },
      series: [
        {
          type: "pie",
          radius: "50%",
          center: ["50%", "70%"],
          data: [
            {
              value: 12,
              name: "卖淫嫖娼",
              itemStyle: {
                color: "#a90000",
              },
              label: {
                textStyle: {
                  color: "#a90000",
                },
              },
            },
            {
              value: 11,
              name: "经侦嫌疑",
              itemStyle: {
                color: "#27727b",
              },
              label: {
                textStyle: {
                  color: "#27727b",
                },
              },
            },
            {
              value: 7,
              name: "重点人口",
              itemStyle: {
                color: "#fcce10",
              },
              label: {
                textStyle: {
                  color: "#fcce10",
                },
              },
            },
            {
              value: 5,
              name: "刑侦重点",
              itemStyle: {
                color: "#e87c25",
              },
              label: {
                textStyle: {
                  color: "#e87c25",
                },
              },
            },
            {
              value: 60,
              name: "吸毒人口",
              itemStyle: {
                color: "#b5c334",
              },
              label: {
                textStyle: {
                  color: "#b5c334",
                },
              },
            },
          ],
        },
      ],
    };
    myChart.setOption(option);

    var two = echarts.init(document.querySelector("#yuan-two"));
    var option = {
      title: {
        text: "单位：岁",
        left: "right",
        textStyle: {
          color: "#fff",
        },
      },
      legend: {
        orient: "vertical",
        left: "left",
        textStyle: {
          color: "#fff",
        },
      },
      series: [
        {
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },

          data: [
            {
              value: 45,
              name: "18-30",
              itemStyle: {
                color: "#a90000",
              },
            },
            {
              value: 45,
              name: "31-40",
              itemStyle: {
                color: "#27727b",
              },
            },
            {
              value: 30,
              name: "41-50",
              itemStyle: {
                color: "#fcce10",
              },
            },
            {
              value: 20,
              name: "51-60",
              itemStyle: {
                color: "#e87c25",
              },
            },
            {
              value: 20,
              name: "65岁以上",
              itemStyle: {
                color: "#b5c334",
              },
            },
            {
              value: 200,
              name: "未标明",
              itemStyle: {
                color: "#fe8463",
              },
            },
          ],
        },
      ],
    };
    two.setOption(option);

    var zhu = echarts.init(document.querySelector("#zhu"));
    var option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: ["河北", "天津", "北京", "新疆", "内蒙", "宁夏", "海南"],
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            textStyle: {
              color: "#fadb71",
              fontSize: 10,
            },
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          textStyle: {
            color: "#fff",
          },
          axisLabel: {
            textStyle: {
              color: "#fadb71",
              fontSize: 10,
            },
          },
          
        },
      ],
      series: [
        {
          name: "Direct",
          type: "bar",
          barWidth: "60%",
          data: [10, 52, 200, 334, 390, 330, 220],
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(25, 100, 150, 0.5)",
            shadowOffsetY: 5,
            color: "#fadb71",
            // color: {
            //   type: "radial",
            //   x: 0.4,
            //   y: 0.3,
            //   r: 1,
            //   colorStops: [
            //     {
            //       offset: 0,
            //       color: "rgb(129, 227, 238)",
            //     },
            //     {
            //       offset: 1,
            //       color: "rgb(25, 183, 207)",
            //     },
            //   ],
            // },
          },
        },
      ],
    };
    zhu.setOption(option);

    var zhe = echarts.init(document.querySelector("#zhe"));
    var option = {
      xAxis: {
        type: "category",
        data: [
          "6:00-9:00",
          "10:00-12:00",
          "13:00-15:00",
          "16:00-20:00",
          "21:00-24:00",
        ],
        axisLabel: {
          textStyle: {
            color: "#77ef05",
            fontSize: 10,
          },
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          textStyle: {
            color: "rgb(0,0,0,0.7)",
            fontSize: 10,
          },
        },
      },
      series: [
        {
          data: [800, 300, 500, 800, 300],
          type: "line",
          smooth: true,
          color: "#77ef05",
        },
      ],
    };
    zhe.setOption(option);
  </script>
</html>
